<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Input from "./Input.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import Icon from "@iconify/svelte";

    const { Story } = defineMeta({
        title: "Components/Form/Input",
        component: Input,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Input />
    {/snippet}
</Story>

<Story name="Textarea">
    {#snippet template(args)}
        <Input type="textarea" />
    {/snippet}
</Story>

<Story name="Password">
    {#snippet template(args)}
        <Space dir="v">
            <Input type="password" />
            <Input type="password" password />
        </Space>
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Input value="disabled" {...args} />
    {/snippet}
</Story>

<Story name="Placeholder" args={{ placeholder: "Enter something" }}>
    {#snippet template(args)}
        <Input {...args} />
    {/snippet}
</Story>

<Story name="Clearable" args={{ clearable: true }}>
    {#snippet template(args)}
        <Input placeholder="Enter something" {...args} />
    {/snippet}
</Story>

<Story name="Prefix" args={{ prefix: "￥" }}>
    {#snippet template(args)}
        <Input placeholder="Enter something" {...args} />
    {/snippet}
</Story>

<Story name="Suffix" args={{ prefix: "￥", suffix: "元" }}>
    {#snippet template(args)}
        <Input placeholder="Enter something" {...args} />
    {/snippet}
</Story>

<Story name="Size" args={{ size: "small" }}>
    {#snippet template(args)}
        <Input placeholder="Enter something" {...args} />
    {/snippet}
</Story>

<Story name="Prepend">
    {#snippet template(args)}
        <Input>
            {#snippet prepend()}
                <Icon icon="f7:person-alt" />
            {/snippet}
            {#snippet append()}
                <Icon icon="f7:search" />
            {/snippet}
        </Input>
    {/snippet}
</Story>

<Story name="AutoHeight" args={{ autoHeight: true }}>
    {#snippet template(args)}
        <Input type="textarea" autoHeight placeholder="Enter something" {...args} />
    {/snippet}
</Story>

<Story name="WordCount" args={{ wordCount: true }}>
    {#snippet template(args)}
        <Input placeholder="Enter something" {...args} maxLength={20} />
        <Input type="textarea" autoHeight placeholder="Enter something" {...args} maxLength={100} />
    {/snippet}
</Story>
